<!--
 * @Descripttion: 意见反馈
 * @version: 
 * @Author:Hui
 * @Date: 2023-05-08 15:38:44
 * @LastEditTime: 2023-11-25 09:43:06
 * @LastEditors: sueRimn
-->

<template>
  <view class="page" :class="systemInfo.fullScreen ? 'else' : ''">
    <!-- #ifdef H5 -->
    <custom-navbar title="意见反馈" />
    <!-- #endif -->
    <view class="banner">
    </view>

    <view class="main">
      <view class="form-wrap">
        <view class="container">
          <view class="h3">问题描述</view>
          <view class="wrap">
            <view class="textarea-wrap">
              <textarea
                v-model="suggestContent"
                class="textarea-box"
                placeholder="请简要描述您的问题及建议"
                placeholder-class="textarea-placeholder"
                :maxlength="300"
              />
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="fixed-footer">
      <view class="btn" @click="handleSubmit">提交</view>
    </view>
  </view>
</template>


<script>

import { mapGetters } from 'vuex'

import { fetchFeedback } from '@/api'
import uploadImage from './components/uploadImage.vue'

export default {
  name: 'feedback-page',
  components: { uploadImage },
  computed: {
		...mapGetters([
			'systemInfo'
		]),
  },
  data() {
    return {
      suggestContent: '',
      userContact: '',
      suggestImages: '',
    }
  },


  methods: {
    uploadImageSuccess(url) {
      this.suggestImages = url
    },

    // 验证
    verify() {
      if (!this.suggestContent) {
        uni.showToast({ title: '请简要描述您的问题及建议', icon: 'none' })
        return false
      }
      return true
    },

    // 提交
    handleSubmit() {
      if (!this.verify()) { return }

      uni.showLoading({ title: '加载中...', mask: true })

      fetchFeedback({
        suggestContent: this.suggestContent,        
      }).then(({ code }) => {
        if (code === 200) {
          uni.showModal({
            title: '提交成功',
            showCancel: false,
            success: () => {
              this.suggestContent = ''
              this.suggestImages = ''
              this.userContact = ''
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page{
  .banner{
    .img{
      width: 750rpx;
      height: 258rpx;
      display: block;
    }
  }
  &.else{
    .main{
      padding-bottom: 170rpx !important;
    }
    .fixed-footer{
      padding-bottom: 50rpx !important;
    }
  }
}

.main{
  padding: 20rpx 30rpx 120rpx;
}

.form-wrap{
  .container{
    background: #FFFFFF;
    box-shadow: 4rpx 12rpx 21rpx 0 rgba(51,51,51,0.06);
    border-radius: 20rpx;
    margin-bottom: 36rpx;
    padding: 0 24rpx 54rpx;
    .h3{
      font-size: 30rpx;
      font-weight: 600;
      color: #333333;
      line-height: 84rpx;
    }
    .wrap{
      padding: 20rpx 24rpx 14rpx;
      background: #F8F8F8;
      border-radius: 20rpx;
      .textarea-wrap{
        padding-bottom: 30rpx;
        .textarea-box{
          background: transparent;
          display: block;
          height: 220rpx;
          font-size: 28rpx;
          color: #333;
          line-height: 40rpx;
        }

        .textarea-placeholder{
          color: #999;
          font-size: 28rpx;
          line-height: 40rpx;
        }
      }
    }
  }

  .contact-box{
    background: #FFFFFF;
    box-shadow: 4rpx 12rpx 21rpx 0 rgba(51,51,51,0.06);
    border-radius: 20rpx;
    padding: 29rpx 34rpx;
    .lable{
      font-size: 26rpx;
      font-weight: 600;
      color: #333;
      line-height: 38rpx;
      flex-shrink: 0;
      padding-right: 50rpx;
    }
    .input-wrap{
      flex: 1;
      .input{
        font-size: 24rpx;
        color: #333;
        line-height: 38rpx;
        text-align: right;
        display: block;
      }
      .input-placeholder{
        color: #999;
        font-size: 24rpx;
      }
    }
  }
}

.fixed-footer{
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 750rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  .btn{
	  height: 96rpx;
	  line-height: 96rpx;
	  background: #FFCE46;
	  border-radius: 50rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 34rpx;
    color: #333333;
    text-align: center;
  }
}
</style>